<template>
	<view class="" @touchmove.stop.prevent="doNothing" v-if="ishas&&data&&data.is_open">
		<view @click="show" class="my-btn" :style="{top: top + 'px', left: left + 'px'}" @touchmove="touchmove" @touchend="touchend">
			<view class="btn-div">
				<view class="_view" :style="'background:' + data.bgcolor + ';opacity:' + data.opacity / 100"></view>
				<text class="_txt" :class="isShow ? data.selecticon : data.icon" :style="'color:' + data.iconcolor"></text>
			</view>
			<view class="btns-div" v-if="isShow" :style="isleft ? 'left:80rpx' : 'right:80rpx'">
				<view class="btns-item" v-for="(item, index) in data.tablist" @click="doevent(item)">
					<view class="btns-icon"><text :class="item.icon+' _txt'"></text></view>
					<text class="_txt">{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'floatmenu',
	props: {
		page: {
			type: Number
		},
		page_id: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			top: 300,
			left: 3,
			isShow: false,
			isleft: true,
			data: {},
			ishas: true
		};
	},
	created() {
		this.getdata();
		const screen = uni.getSystemInfoSync();
		const wWidth = screen.windowWidth;
		this.left = wWidth - 50;
	},
	methods: {
		doNothing() {},
		getdata() {
			this.$http('/fitment/float_menu', {}, 'GET').then(res => {
				if(res.data.msg){
					this.data = res.data.msg;
							
					this.ishas = this.data.checkedCities.findIndex(_ => _ == this.page_id) > -1;
				}
				
			});
		},
		show() {
			this.isShow = !this.isShow;
		},
		touchmove: function(e) {
			if (this.isShow) {
				return;
			}
			var position = e.touches[0];
			var wHeight = this.getSystemInfo('H');
			if (position.clientY > 100 && position.clientY + 100 < wHeight) {
				this.top = position.clientY - 20;
			}
			this.left = position.pageX;
		},
		touchend: function(e) {
			if (this.isShow) {
				return;
			}
			var wWidth = this.getSystemInfo('W');
			const pageX = e.changedTouches[0].clientX;
			if (pageX > wWidth * 0.5) {
				this.isleft = false;
				this.left = wWidth - 50;
			} else {
				this.isleft = true;
				this.left = 3;
			}
		},
		getSystemInfo: function(type) {
			var result;
			const screen = uni.getSystemInfoSync();
			const wHeight = screen.windowHeight;
			const wWidth = screen.windowWidth;
			switch (type) {
				case 'H':
					result = wHeight;
					break;
				case 'W':
					result = wWidth;
					break;
				default:
					result = 'Err';
			}
			return result;
		},
		doevent(data) {
			let type = data.type;
			switch (type) {
				case 1:
					//返回上页
					uni.navigateBack();
					break;
				case 2:
					this.Jumpurl(
						{
							type: 1,
							link: '../index/index'
						},
						'switch'
					);
					//返回首页
					break;
				case 3:
					//返回顶部
					uni.pageScrollTo({
						scrollTop: 0
					});
					break;
				case 4:
					this.Jumpurl(data.linkdata);
					//页面跳转
					break;
			}
		}
	}
};
</script>

<style lang="scss">
.my-btn {
	position: fixed;
	// right: 20rpx;
	// bottom: 140rpx;
	z-index: 90909090;
	.btn-div {
		// background: rgba(0, 0, 0, 0.5);
		color: #ffffff;
		width: 72rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		> ._view {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		._txt {
			position: relative;
			z-index: 2;
			font-size: 48rpx;
		}
	}
	.btns-div {
		position: absolute;
		bottom: 60rpx;
		display: flex;
		flex-wrap: wrap;
		width: 370rpx;

		padding: 20rpx 20rpx 0 20rpx;
		border-radius: 20rpx;
		// display: none;
		background: rgba(0, 0, 0, 0.5);
		.btns-item {
			width: 110rpx;
			color: #ffffff;
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;

			.btns-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background-color: #ffffff;
				text-align: center;
				line-height: 60rpx;
				margin-bottom: 10rpx;
				._txt {
					color: #000;
					font-size: 36rpx;
				}
			}
			._txt {
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
